<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>训练</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="shortcut icon" href="logo.ico">
    <style>
        .hot li{

            padding: 30px 16px 30px 0;
            /*加下面实线*/
            border-bottom: 1px solid #ededed;
            /*让li标签变成弹性模型，为了方便子元素并列排*/
            display: flex;
        }
        /*设置显示的数字*/
        .hot .hotItem {
            width: 57px;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            color:#ff9607;
        }
        /*设置文本*/
        .hot .hotContent{
            flex : 1 1;  /*设置子元素的弹性尺寸*/
        }
        /*设置文本中的h2*/
        .hot .hotContent h2{
            font-size: 30px;
            line-height: 32px;
            /*多出来的变成省略号*/
            display: -webkit-box;
            -webkit-line-clamp: 1;/*显示1行*/
            -webkit-box-orient: vertical;/*让子元素竖着排*/
            overflow: hidden;
        }
        /*设置文本中的p*/
        .hot .hotContent p{
            font-size:  15px;
            line-height: 25px;
            margin-top: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 3;/*显示1行*/
            -webkit-box-orient: vertical;/*让子元素竖着排*/
            overflow: hidden;

        }
        .hot .hotContent p a{
            color: #909399;
        }
        .hot .hotContent h2 a{
            color: #1a1a1a;
        }
        .hot .hotContent h2 a:hover{
            color: #d52f04;
        }
        .hot .tools{
            margin-top: 10px;
        }
        .hot .tools span{
            font-size: 14px;

        }
        /*设置图片那一层*/
        .hot .hotImg{
            margin-left: 16px;
        }
        /*设置图片*/
        .hot .hotImg img{
            width: 266px;
            height: 144px;
            border-radius: 4px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .user{
            text-decoration: none;/*无下划线*/
            font-size: 24px;
            color: #333334;
            display:block;
            margin-top:17px;
            margin-right: 15px;
        }
        .butten{
            height: 30px;
            display: flex;/*设置为弹性容器*/
            align-items: center; /*定义div1的元素垂直居中*/
            justify-content: center; /*定义div1的里的元素水平居中*/
            margin-top: 20px;
            margin-bottom: 1px;

        }
        .butten a{
            text-decoration: none;/*无下划线*/
            font-size: 16px;
            color: #b3b3b3;

        }





    </style>
</head>
<body>



<div id="app" style="margin: 0 auto">
    <!--顶部 logo 搜索 登录注册-->
    <div  style="width: 1200px;height: 70px;margin: 0 auto;align-content: center;position: relative; ">
    <span>
      <img src="https://www.jianshen8.com/templets/jianshen8/images/logo.png" alt="">
      <el-input v-model="input" class="el-input__icon "
                suffix-icon="el-icon-search"
                placeholder="请输入内容"
                style="width:400px;
                    position: absolute;
                    top: 0;
                    bottom: 20px;
                    margin: 0px   15% 0;"></el-input>
      <a href="/login.html"  style="float: right;" class="user">登录</a>
      <a href="/reg.html"  style="float: right" class="user">注册</a>
    </span>
    </div>




    <!--导航菜单-->
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"

    >
        <el-menu-item index="1"  style="margin: 0 0 0 20% " >首页</el-menu-item>
        <el-submenu index="2">
            <template slot="title">器械</template>
            <el-menu-item index="2-1">器械1</el-menu-item>

            <el-submenu index="2-4">
                <template slot="title">器械4</template>
                <el-menu-item index="2-4-1">器械4-1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">训练</template>
            <el-menu-item index="3-1">训练1</el-menu-item>
            <el-menu-item index="3-2">训练2</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
            <template slot="title">饮食</template>
            <el-menu-item index="4-1">饮食1</el-menu-item>
            <el-menu-item index="4-2">饮食2</el-menu-item>
        </el-submenu>
        <el-menu-item index="5" disabled>资讯</el-menu-item>
        <el-menu-item index="6"><a href="https://baidu.com" target="_blank">商城</a></el-menu-item>
    </el-menu>
    <!--  上中下-->
    <el-container style="  width:1200px ;margin: 0 auto">
        <!-- 上面：表格-->
        <el-header>

        </el-header>
        <!--中间图片显示-->
        <el-divider></el-divider>
        <el-row class="block-col-2">
            <el-col :span="12">
                <span class="demonstration">自由器械</span>
                <el-dropdown>
      <span class="el-dropdown-link">
        请选择<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus">哑铃</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus">杠铃</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus-outline">战绳</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-check">弹力绳</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-check">杠铃</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>


            <el-col :span="12">
                <span class="demonstration">固定器械</span>
                <el-dropdown>
      <span class="el-dropdown-link">
        请选择<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus">龙门架</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus">提踵机</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus-outline">仰卧板</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-check">划船机</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-check">夹胸器</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>


        </el-row>
        <el-divider></el-divider>

        <el-main style="text-align: left ;padding: 0px">
            <div class="hot"  style="width: 800px; padding: 0px 20px"  >
                <ol style="padding-inline-start: 0px;;">
                    <li v-for="(c,index) in categoryArr">
                        <!--左边数字-->

                        <!--中间文字-->
                        <div class="hotContent">
                            <!--最上边标题-->
                            <h2><a href="#">{{c.title}}</a></h2>
                            <!--内容简介-->
                            <p><a href="#">
                                {{c.description}}
                                <!--我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，不太清楚该怎么选择。那么你知道健身要使用那些补剂以及使用这些补剂的正确方法是什么
                                我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，不太清楚该怎么选择。那么你知道健身要使用那些补剂以及使用这些补剂的正确方法是什么
                                我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，-->不太清楚该怎么选择。那么你知道健身要使用那些补剂以及使用这些补剂的正确方法是什么
                            </a></p>
                            <!--热度和日期-->
                            <div class="tools">
                                <!--浏览量-->
                                <i class="el-icon-view" style="margin-left: 15px"></i>
                                <span style="color: #f17656;">{{c.pageView}}</span>人浏览
                                <!--日期-->
                                <span style="margin-left: 300px">{{c.date}}</span>
                            </div>
                        </div>
                        <!--右边图片-->
                        <div class="hotImg">
                            <a href="#"><img :src="c.url" alt="健身使用哪些补剂和补剂的正确方法"></a>
                        </div>
                    </li>
                </ol>
            </div>


        </el-main>
        <!--下部分页列表-->












        <el-footer>
            <div style="text-align: center;">
                <el-pagination style="padding-top: 10px;"
                               background
                               layout="prev, pager, next"
                               :total="53"
                               :page-size="4"
                >
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
    <!--底部-->
    <div style="background: #555;height: 112px;padding-top:5px">
        <template>
            <div  class="butten">

                <span><a href="/fuwu/about/abouts.html" rel="nofollow">网站简介</a></span>
                <el-divider direction="vertical"></el-divider>
                <span> <a href="/fuwu/about/ads.html" rel="nofollow">商务合作</a></span>
                <el-divider direction="vertical"></el-divider>
                <span> <a href="/fuwu/about/cooperate.html" rel="nofollow">战略合作</a></span>
                <el-divider direction="vertical"></el-divider>
                <span>  <a href="/fuwu/about/contact.html" rel="nofollow">联系我们</a></span>
                <el-divider direction="vertical"></el-divider>
                <span>   <a href="/nav.html">网站导航</a></span>

            </div>
        </template>

        <div class="butten" >
            <p style="color:#b3b3b3;">Copyright © 2011 健身吧 www. jianshen .com . 版权所有 <a href="http://beian.miit.gov.cn/" rel="nofollow">
                京ICP备2022036109号-1</a></p>
        </div>

    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',

        data: function() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                input: '',
                fits: [ 'cover'],
                url: 'https://www.jianshen8.com/uploads/allimg/200619/5_200619094307_1.jpg',
                categoryArr:[
                    {
                        title:"健身使用哪些补剂和补剂的正确方法,",
                        description:"我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，不太清楚该怎么选择。那么你知道健身要使用那些补剂以及使用这些补剂的正确方法是什么\n" +
                            "        我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，不太清楚该怎么选择。那么你知道健身要使用那些补剂以及使用这些补剂的正确方法是什么\n" +
                            "        我们健身到一定的时候就会适量的补充一些补剂来帮助自己健身。现在市面上的健身补剂市场也比较大，很多人面对这些健身补剂的时候也犯了难，",
                        url:"tu01.png",
                        pageView:2041,
                        date:"2021-04-20"

                    }]
            }


        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })

</script>
</html>